<template>
  <uni-swipe-action class="cart-item">
    <uni-swipe-action-item :right-options="options" :show="isOpened" :auto-close="false" @click="handleDelete">
      <view class="cart-item-content">
        <radio
          :value="goodsData.id"
          :checked="goodsData.is_checked"
          @click="goodsData.is_checked = !goodsData.is_checked"
        ></radio>
        <view class="image" @click="gotoGoods()">
          <image :src="goodsData.goods_info.cover_url"></image>
        </view>
        <view class="item-info">
          <view class="item-title">{{ goodsData.goods_info.name }}</view>
          <view class="item-params" @click="handleShowParams()">
            {{ goodsData.goods_param.name }}
            <view class="more"></view>
          </view>
          <view class="item-price">
            <text>￥</text>
            <text class="price">{{ formatPrice(goodsData.price).big }}</text>
            <text>.{{ formatPrice(goodsData.price).small }}</text>
            <view class="real-price" v-if="realDiscountPrice != 0 && goodsData.is_checked">
              券后价约￥{{ realDiscountPrice }}
            </view>
          </view>

          <!-- 数量 -->
          <view class="item-count-wrapper" @click="handleShowParams()">
            <view class="count-content">x{{ goodsData.count }}</view>
          </view>
        </view>
      </view>
    </uni-swipe-action-item>

    <!-- 修改商品参数栏 -->
    <changeParams
      :visible.sync="showParams"
      :infoid="{ goods_id: goodsData.goods_id, goods_param_id: goodsData.goods_param_id }"
      :ordercount="goodsData.count"
      @submit="handleSubmit"
    ></changeParams>
  </uni-swipe-action>
</template>

<script>
import changeParams from '@/components/mCartItem/changeParams.vue'
import { formatPrice, calculateSubPrice, calculateAddPrice } from '../../utils/formatPrice'
export default {
  components: { changeParams },
  props: {
    goods: {
      type: Object,
      require: true,
      default: {
        id: '',
        goods_id: '',
        goods_info: {
          cover_url: '',
          logistics_price: '',
          name: '暂无数据'
        },
        goods_param_id: '',
        goods_param: {
          id: '',
          is_empty: false,
          name: '',
          price: ''
        },
        is_checked: false,
        user_id: '',
        count: 0
      }
    },
    gmap: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      showParams: false,
      goodsData: this.goods,
      options: [
        {
          text: '删除',
          style: {
            backgroundColor: '#F56C6C'
          }
        }
      ],
      formatPrice,
      calculateSubPrice
    }
  },
  watch: {
    goods: {
      handler(n) {
        this.goodsData = n
      },
      immediate: true,
      deep: true
    },
    'goodsData.is_checked': function (newVal) {
      this.handleChoose(newVal)
    },
    showParams(n) {
      this.$emit('param', n)
    }
  },
  computed: {
    realDiscountPrice() {
      // console.log(this.gmap, this.goodsData)

      if (this.gmap != null && Object.keys(this.gmap).length !== 0) {
        const obj = this.gmap[this.goodsData.id]
        // console.log(obj)
        try {
          const discount = calculateAddPrice(obj.goodsDiscount, obj.orderDiscount)
          if (discount) return calculateSubPrice(this.goodsData.price, discount).toFixed(2)
          else return 0
        } catch (e) {}
      } else {
        return 0
      }
    }
  },
  created() {},
  methods: {
    handleShowParams() {
      this.showParams = true
    },
    handleSubmit(e) {
      // console.log(e)
      this.$emit('submit', e)
    },
    handleChoose(val) {
      this.$emit('select', {
        id: this.goodsData.id,
        is_checked: val
      })
    },
    handleDelete() {
      this.$emit('delete', {
        id: this.goodsData.id,
        is_checked: this.goodsData.is_checked
      })
    },
    gotoGoods() {
      uni.navigateTo({ url: '/pages/goods/index?id=' + this.goodsData.goods_id })
    }
  }
}
</script>

<style lang="scss" scoped>
.cart-item {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30upx $def-padding;
  background-color: #fff;
  box-sizing: border-box;
  border-radius: 20upx;
  margin-top: 20upx;
  box-shadow: $def-shadow;

  .cart-item-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5upx 0;
  }

  .image {
    width: 160upx;
    height: 160upx;
    margin-left: 10upx;
    margin-right: 15upx;
    border-radius: $def-radius;
    overflow: hidden;
    image {
      width: 100%;
      height: 100%;
    }
  }

  .item-info {
    flex: 2;
    position: relative;
    .item-title {
      font-size: 30upx;
      color: $uni-text-color;
    }

    .item-params {
      padding: 10upx 5upx;
      box-sizing: border-box;
      color: $uni-text-color-placeholder;
      width: 400upx;
      position: relative;
      display: flex;
      align-items: center;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      cursor: pointer;
      font-size: 27upx;
      padding-right: 100upx;
      .more {
        // background-color: #f58e2d;
        background-image: url(../../static/downpush.png);
        background-repeat: no-repeat;
        background-size: cover;
        background-color: #fff;
        width: 25upx;
        height: 25upx;
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        font-size: 30upx;
        right: 10upx;
        border-radius: 5upx;
      }

      .item-params-symbol {
        display: inline-block;
        position: absolute;
        right: 0upx;
        transform: rotate(90deg);
        font-weight: 900;
        margin-left: 20upx;
      }
    }

    .item-title {
      font-weight: 900;
    }
  }

  .item-price {
    display: flex;
    align-items: flex-end;

    font-size: 30upx;
    color: $def-price-color;
    font-weight: 900;
    .price {
      font-size: 40upx;
    }

    .real-price {
      margin-left: 10upx;
      font-weight: normal;
      font-size: 25upx;
      color: #f58e2d;
    }
  }

  .item-count-wrapper {
    position: absolute;
    right: 30upx;
    top: -5upx;
    font-size: 25upx;
    color: $uni-text-color-grey;
    cursor: pointer;
    z-index: 1;

    .count-content {
      padding: 5upx 8upx;
      border: rgba($color: #000000, $alpha: 0.2) solid 3upx;
      border-radius: 10upx;
    }
  }
}
</style>
